<!--
 * @Author: g05047
 * @Date: 2021-06-11 16:41:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-26 13:56:14
 * @Description: file content
-->
<template>
  <div>
    <a-form-model ref="laborDetail" :model="laborDetailState" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" style="margin-left:-15px;margin-top:-10px">
      <a-form-model-item label="处理状态" prop="status">
        <a-radio-group :value="laborDetailState.status" @change="onChangeStatus">
          <a-radio value="mediationing">
            调解中
          </a-radio>
          <a-radio value="arbitrationing">
            仲裁中
          </a-radio>
          <a-radio value="finish">
            已完结
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="产生原因" prop="desc">
        <a-textarea v-model="laborDetailState.memo" :max-length="300" :auto-size="{ minRows: 5 }" placeholder="请输入产生原因" allow-clear />
        <span style="position: absolute;right: 10px;bottom: -5px;color: #ccc;">{{ laborDetailState.memo.length }}/300</span>
      </a-form-model-item>
      <a-form-model-item label="上传文件">
        <div class="clearfix">
          <a-upload list-type="picture-card" :file-list="fileList" :remove="onRemoveNotice" @preview="onpreview" :action="get_OSS_config" :customRequest="handleChange">
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
        <a-button type="primary" @click="onEdit">确定</a-button>
        <a-button style="margin-left: 10px;" @click="onCancelSave">取消</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-descriptions title=" " class="desc-info">
      <a-descriptions-item label="产生时间">{{ nowDetail.createTime ? transferDate(nowDetail.createTime, 2) : '' }}</a-descriptions-item>
      <a-descriptions-item label="状态更新时间">{{ nowDetail.updateTime ? transferDate(nowDetail.updateTime, 2) : '' }}</a-descriptions-item>
      <a-descriptions-item label="已处理时长">{{ nowDetail.days }}天</a-descriptions-item>
    </a-descriptions>
    <a-tabs :default-active-key="tabKey" @change="onTabsChange">
      <a-tab-pane key="1" tab="雇员信息">
        <a-descriptions title=" " v-if="employeeInfoList.length">
          <a-descriptions-item v-for="item in employeeInfoList" :key="item.txt" :label="item.txt">
            <span v-if="item.value != '' && item.value != 'null'">{{ item.value }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="2" tab="企业信息">
        <a-descriptions title=" " v-if="companyInfoList.length">
          <a-descriptions-item v-for="item in companyInfoList" :key="item.txt" :label="item.txt">
            <span v-if="item.value">{{ item.value }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="3" tab="合同信息">
        <a-descriptions title=" " v-if="contractInfoList.length">
          <a-descriptions-item v-for="(item, index) in contractInfoList" :key="item.txt" :label="item.txt">
            <span v-if="index == 2">{{ item.value == 1 ? '固定期限' : item.value == 2 ? '无固定期限' : '' }}</span>
            <span v-else-if="index == 3">
              {{ item.value == 'Corvidae' ? '待完善' : item.value == 'Wait' ? '待签署' : item.value == 'Process' ? '签署中' : item.value == 'Success' ? '签署成功' : item.value == 'Fail' ? '签署失败' : item.value == 'Refuse' ? '拒签' : item.value == 'Cancel' ? '取消签署' : '' }}
            </span>
            <span v-else-if="index == 5 || index == 6">{{ item.value ? transferDate(item.value, 0) : '' }}</span>
            <span v-else-if="index == 7 || index == 8">{{ item.value ? item.value + '元' : '' }}</span>
            <span v-else-if="index == 9">{{ item.value ? item.value + '个月' : '' }}</span>
            <span v-else-if="index == 4 || index == 12">{{ item.value ? '是' : '否' }}</span>
            <span v-else-if="index == 10">{{ item.value == 1 ? '正式工' : item.value == 2 ? '临时工' : item.value == 3 ? '实习生' : '其他' }}</span>
            <span v-else-if="index == 11">{{ item.value == 1 ? '标准工时制' : item.value == 2 ? '不定时工作制' : item.value == 3 ? '综合工时制' : '' }}</span>
            <span v-else>{{ item.value ? item.value : '' }}</span>
          </a-descriptions-item>
        </a-descriptions>
        <a-table v-if="dataSource.length" rowKey="id" :columns="columns" :data-source="dataSource" :pagination="false" style="background: #fff" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getLaborDetail, getLaborEdit } from '@/services/labor.js';
import { get_OSS_config } from '@/services/api';
import { upLoadAliyun, transferDate, getObjToArray } from '@/utils/util';
export default {
  name: 'laborDisputesDetail',
  props: ['id'],
  data () {
    return {
      get_OSS_config: get_OSS_config,
      laborDetailState: {
        status: '',
        memo: '',
        adviceNoteUrl: '',
      },
      tabKey: '1',
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '部门',
          dataIndex: 'deptName',
        },
        {
          title: '岗位',
          dataIndex: 'postName',
        },
        {
          title: '电话',
          dataIndex: 'mobile',
        },
      ],
      dataSource: [],
      nowDetail: {},
      employeeInfoList: [],
      companyInfoList: [],
      contractInfoList: [],
      isColleague: false,
      previewVisible: false,
      previewImage: '',
      fileList: []
    };
  },
  created () {
    this.getLaborDetail({ id: this.id });
  },
  methods: {
    transferDate,
    handleCancel () {
      this.previewVisible = false;
    },
    handleChange (info) {
      this.fileList = [];
      this.$message.warning('正在上传中......', 1)
      let fileType = info.file.name
      const type = fileType.substring(fileType.lastIndexOf('.'))
      if (!/\.(jpg|png)$/.test(type)) {
        this.$message.warning('只允许上传图片！')
        return;
      }
      upLoadAliyun(info).then(res => {
        this.laborDetailState.adviceNoteUrl = res.filePath;
        this.fileList.push({ uid: '-3', name: 'adviceNoteUrl.png', status: 'done', url: res.filePath });
        this.$message.success('上传成功！')
      });
    },
    onpreview (file) {
      this.previewVisible = true;
      this.previewImage = file.url;
    },
    onRemoveNotice () {
      this.fileList = [];
      this.laborDetailState.adviceNoteUrl = '';
    },
    onCancelSave () {
      this.getLaborDetail({ id: this.id });
    },
    onEdit () {
      const params = this.laborDetailState;
      params.id = this.id;
      this.getLaborEdit(params);
    },
    onChangeStatus (e) {
      this.laborDetailState.status = e.target.value;
    },
    onTabsChange (key) {
      this.tabKey = key;
      this.getLaborDetail({ id: this.id });
    },
    /**
     * @description: 劳资纠纷详情
     * @param {*}
     * @return {*}
     */
    getLaborDetail (params) {
      getLaborDetail(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.fileList = [];
          this.nowDetail = data;
          const { status, memo, adviceNoteUrl } = data;
          if (adviceNoteUrl) {
            this.fileList.push({ uid: '-3', name: 'adviceNoteUrl.png', status: 'done', url: adviceNoteUrl });
          }
          const statusDetail = ['mediationing', 'arbitrationing', 'finish'][['调解中', '仲裁中', '已完结'].findIndex(val => val == status)];
          this.laborDetailState = { status: statusDetail, memo, adviceNoteUrl };
          const employee = data.employee;
          let { name, education, census, marriage, birthday, email, nation, schoolName, schoolMajor, political, idCard, mobile, entryTime, firstJobDate, address } = employee;
          const employeeObject = { name, education, census, marriage, birthday, email, nation, schoolName, schoolMajor, political, idCard, mobile, entryTime, firstJobDate, address };
          employeeObject.wechat = employee.wechat ? employee.wechat.wechatName : '';
          const concat = employee.contactList.filter(val => val.contactType == 'Contact')[0];
          employeeObject.contactName = concat.name;
          employeeObject.contactMobile = concat.mobile;
          this.employeeInfoList = this.getEmployeeArray(employeeObject);
          const company = data.company;
          if (company) {
            let { name: companyName, taxpayerNumber, mobile: companyMobile } = company;
            const companyObject = { companyName, taxpayerNumber, companyMobile };
            this.companyInfoList = this.getCompanyArray(companyObject);
          }
          const contract = data.contract;
          let { deptName, postName, contractType, status: signStatus, electronicIf, contractBeginDate, contractEndDate, salaryAmt, trialSalaryAmt, trialPeriodMonth, jobNature, jobDuty } = contract;
          const contractObject = { deptName, postName, contractType, signStatus, electronicIf, contractBeginDate, contractEndDate, salaryAmt, trialSalaryAmt, trialPeriodMonth, jobNature, jobDuty };
          if (employee.colleagueList && employee.colleagueList.length) {
            this.isColleague = true;
            this.dataSource = employee.colleagueList;
          } else {
            this.isColleague = false;
          }
          contractObject.isColleague = this.isColleague;
          this.contractInfoList = this.getContractArray(contractObject);
          this.employeeInfo = employee;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 雇员信息、企业信息
     * @param {*} obj
     * @return {*}
     */
    getEmployeeArray (obj) {
      const arr1 = ['雇员姓名', '最高学历', '户籍属性', '婚姻情况', '出生年月', '电子邮箱', '民族', '毕业院校', '毕业专业', '政治面貌', '身份证号', '手机号', '入职时间', '首次工作时间', '现住址', '微信号', '紧急联系人姓名', '紧急联系人电话']
      const arr2 = ['name', 'education', 'census', 'marriage', 'birthday', 'email', 'nation', 'schoolName', 'schoolMajor', 'political', 'idCard', 'mobile', 'entryTime', 'firstJobDate', 'address', 'wechat', 'contactName', 'contactMobile']
      return getObjToArray(arr1, arr2, obj)
    },
    getCompanyArray (obj) {
      const arr1 = ['企业名称', '营业执照编号', '联系人电话']
      const arr2 = ['companyName', 'taxpayerNumber', 'companyMobile']
      return getObjToArray(arr1, arr2, obj)
    },
    getContractArray (obj) {
      const arr1 = ['入职部门', '入职岗位', '合同类型', '签署状态', '是否电子合同', '合同开始日期', '合同终止日期', '基本薪资', '试用期薪资', '试用期', '工作性质', '工作制', '是否有亲朋同行']
      const arr2 = ['deptName', 'postName', 'contractType', 'signStatus', 'electronicIf', 'contractBeginDate', 'contractEndDate', 'salaryAmt', 'trialSalaryAmt', 'trialPeriodMonth', 'jobNature', 'jobDuty', 'isColleague']
      return getObjToArray(arr1, arr2, obj)
    },
    /**
     * @description: 编辑劳资纠纷
     * @param {*}
     * @return {*}
     */
    getLaborEdit (params) {
      getLaborEdit(params).then(res => {
        let { code, msg } = res.data;
        if (code == 200) {
          this.$message.success('修改成功');
          this.getLaborDetail({ id: this.id });
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.desc-info {
  height: 80px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
  /deep/ .ant-descriptions-row {
    line-height: 38px;
  }
}
.avatar-uploader .adviceNoteUrl {
  width: 88px;
  height: 88px;
}
</style>
